import React, { useState, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Button, Row, Col, Form, Checkbox, Space, message, Input, Radio, Modal } from 'antd';
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { connect, useIntl } from 'umi';
import request from '@/utils/request';
import { EmpSelect } from '@/components/FormItemSelect';
import OpMasterSelect from '@/components/OpMasterSelect';
import QuickMenu from '@/components/QuickMenu';

const apiURL = '/api/services/app/OpMaster/';
const currentControl = 'OpMaster';
const { confirm } = Modal;

const ViewPage: React.FC<any> = (props) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({ id: 0 });
  const formRef = useRef<any>();
  const intl = useIntl();

  const onFinish = (values: any) => {
    var model = values.OpMaster;
    setLoading(true);
    var act = 'Modify';
    if (model.id == 0 || !model.id) {
      act = 'New';
    }
    request(apiURL + act, {
      method: 'POST',
      data: model,
    }).then((response) => {
      if (response) {
        if (response.success) {
          if (response.result.success) {
            message.success(intl.formatMessage({id:'pages.save.success'}));
            setData(response.result.data);
          }
        }
        setLoading(false);
      }
    });
  };

  const ResetForm = () => {
    formRef.current.resetFields();
    setData({ id: 0 });
  };

  const getData = (e: any) => {
    if (e.opCode) {
      request(apiURL + 'GetList', {
        method: 'GET',
        params: { keywords: e.opCode },
      }).then((response: any) => {
        if (response.success) {
          var data = response.result.items[0];
          if (data) {
            formRef.current.setFieldsValue({ OpMaster: data });
            setData(data);
          }
        }
      });
    }
  };

  const delObj = () => {
    confirm({
      title: intl.formatMessage({ id: 'pages.warning' }),
      icon: <ExclamationCircleOutlined />,
      content: intl.formatMessage({ id: 'pages.delete.confirm' }),
      onOk() {
        props
          .dispatch({
            type: 'Abp/delete',
            payload: { id: data.id },
            control: currentControl,
          })
          .then(() => {
            formRef.current.resetFields();
            setData({ id: 0 });
          });
      },
    });
  };

  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  };

  return (
    <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
      <Form {...layout} ref={formRef} onFinish={onFinish}>
        <Card
          title={intl.formatMessage({ id: 'menu.manufacture.opMaster' })}
          extra={[
            <Space key="s1">
              <Button type="primary" icon={<PlusOutlined />} onClick={ResetForm}>
                {intl.formatMessage({ id: 'pages.new' })}
              </Button>
              <Button type="primary" htmlType="submit" loading={loading}>
                {intl.formatMessage({ id: 'pages.save' })}
              </Button>
              <Button danger onClick={delObj} disabled={data.id === 0}>
                {intl.formatMessage({ id: 'pages.delete' })}
              </Button>
              <QuickMenu path="/manufacture/opMaster" icon="icon-document" title="OpMaster" />
            </Space>,
          ]}
        >
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Form.Item label="ID" name={['OpMaster', 'id']} style={{ display: 'none' }}>
                <Input />
              </Form.Item>
              <Form.Item label={intl.formatMessage({ id: 'pages.opCode' })}>
                <Input.Group compact>
                  <OpMasterSelect
                    width={200}
                    noStyle
                    name={['OpMaster', 'opCode']}
                    setCurrent={getData}
                    rules={[{ required: true, message: intl.formatMessage({ id: 'pages.opCode.required' }) }]}
                  />
                </Input.Group>
              </Form.Item>
              <Form.Item
                label={intl.formatMessage({ id: 'pages.opDesc' })}
                rules={[{ required: true, message: intl.formatMessage({ id: 'pages.opDesc.required' }) }]}
                name={['OpMaster', 'opDesc']}
              >
                <Input />
              </Form.Item>
              <Form.Item
                wrapperCol={{ offset: 5 }}
                name={['OpMaster', 'subcontract']}
                valuePropName="checked"
              >
                <Checkbox>{intl.formatMessage({ id: 'pages.subContract' })}</Checkbox>
              </Form.Item>
              <Form.Item
                name={['OpMaster', 'opType']}
                label={intl.formatMessage({ id: 'pages.opType' })}
                rules={[{ required: true, message: intl.formatMessage({ id: 'pages.opType.required' }) }]}
              >
                <Radio.Group name="radiogroup">
                  <Radio value="M">{intl.formatMessage({ id: 'pages.opType.M' })}</Radio>
                  <Radio value="S">{intl.formatMessage({ id: 'pages.opType.S' })}</Radio>
                </Radio.Group>
              </Form.Item>
              <EmpSelect
                showSearch
                width={200}
                name={['OpMaster', 'buyerID']}
                label={intl.formatMessage({ id: 'pages.buyerID' })}
                params={{
                  deptCode: 'PD',
                }}
              />
              <Form.Item label={intl.formatMessage({ id: 'pages.commentText' })} name={['OpMaster', 'commentText']}>
                <Input.TextArea rows={5} />
              </Form.Item>
            </Col>
            <Col span={12}></Col>
          </Row>
        </Card>
      </Form>
    </PageHeaderWrapper>
  );
};

export default connect(({ Abp, user }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: user.currentUser,
}))(ViewPage);
